<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="teste">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_pt-br.js"></script>
        
        <script>
            var app = angular.module("teste", []);
            app.factory('testeService', function($http, $q) {
                return{
                    getOrgaos: function() {
                        return $http.get('http://api.convenios.gov.br/siconv/v1/consulta/orgaos.json')
                                .then(function(response) {
                                    if (typeof response.data === 'object') {
                                        return response.data;
                                    } else {
                                        return $q.reject(response.data);
                                    }
                                }, function(response) {
                                    return $q.reject(response.statusText);
                                });
                    },
                    getConvenios:function(codigoOrgao){
                         return $http.get('http://api.convenios.gov.br/siconv/v1/consulta/convenios.json?id_orgao_concedente='+codigoOrgao)
                                .then(function(response) {
                                    if (typeof response.data === 'object') {
                                        return response.data;
                                    } else {
                                        return $q.reject(response.data);
                                    }
                                }, function(response) {
                                    return $q.reject(response.statusText);
                                });
                    }
                };
            });
            app.controller('testeCtrl', function($scope, testeService) {
                $scope.data = {};
                getOrgaos = function() {
                    var promise = testeService.getOrgaos();
                    promise.then(function(result) {
                        $scope.data.orgaos = new Array();
                        $scope.data.orgaos = result.orgaos;
                    },
                            function(erro) {
                                $scope.erro = erro;
                            }

                    );
                };
                $scope.getConvenios=function(codOrgao){
                    var promise = testeService.getConvenios(codOrgao);
                    promise.then(function(result) {
                        $scope.data.convenios = new Array();
                        $scope.data.convenios = result.convenios;
                    },
                            function(erro) {
                                $scope.erro = erro;
                            }

                    );
                };
                getOrgaos();
            });
        </script>
        <title></title>
    </head>
    <body ng-controller="testeCtrl">

        <select ng-model="orgaoSelecionado"  ng-options="orgao.id as orgao.nome for orgao in data.orgaos">
            <option value="">Selecione um orgao</option>
            
        </select>
        <label>{{orgaoSelecionado}}</label>
        <button ng-click="getConvenios(orgaoSelecionado)">buscar</button>
        <table class="table" ng-show="data.convenios">
            <thead>
            <td>Código</td>
            <td>Data inicio vigência</td>
            <td>Data publicação</td>
            <td>Modalidade</td>
            <td>Valor global</td>
            </thead>
            <tr ng-repeat="item in data.convenios">
                <td >{{item.id}}</td>
                <td >{{item.data_inicio_vigencia|date:'dd/MM/yyyy'}}</td>
                <td >{{item.data_publicacao|date:'dd/MM/yyyy'}}</td>
                <td >{{item.modalidade}}</td>
                <td >{{item.valor_global|currency}}</td>
            </tr>

        </table>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    </body>
</html>
